<template>
    <div class="question-class">
        <Header title="问卷调查"/>
        <van-empty v-if="questionList === null" image="search" description="无问卷信息"/>
        <div class="content" v-else>
            <van-search v-model="value" shape="round" placeholder="搜索问卷" />
            <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
                <van-list
                    v-model:loading="loading"
                    :finished="finished"
                    finished-text="没有更多了"
                    @load="onLoad">
                  <van-cell v-for="item in questionList" :key="item.id" class="vanCell-class">
                      <div @click="handleViewOrAdd(item)" >
                          <van-row>
                              <van-col span="16" class="title-class">
                                  <span>
                                      {{ item.title }}</span>
                              </van-col>
                              <van-col span="4" offset="4"  class="title-class">
                                  <div v-if="item.status === 1 && item.inTime === 0 &&item.myStatus !== 2" class="grey-text">
                                      <span style="margin-left:25%">填写</span>
                                      <van-icon name="arrow"/>
                                  </div>
                              </van-col>
                          </van-row>
                          <van-row>
                              <van-col span="12" class="title-class">
                                <span style="margin-top:2vw;">
                                      <var-badge dot style="line-height:4vh;margin:1vw"/>
                                      <span class="green-text" v-if="item.status === 1 && item.inTime === 0">进行中</span>
                                      <span class="grey-text" v-else-if="item.status === 2">暂停收集</span>
                                      <span class="grey-text" v-else-if="item.inTime === 1">已结束</span>
                                      <span class="grey-text" v-else>未开始</span>
                                  </span>
                              </van-col>
                              <van-col span="12"  class="title-class"  style="margin-top:5vw;">
                                  <div style="margin-left:26vw;width:35%;line-height:6vw;border-radius:6vw 0 0 6vw;background-color:rgba(43,149,239,0.87);border:1px solid #2b95ef;text-align: center;">
                                      <!--状态-->
                                      <span style="font-size:3vw;color:white;" v-if="item.myStatus === 0">未完成</span>
                                      <span style="font-size:3vw;color:white;" v-else-if="item.myStatus === 2">已完成</span>
                                  </div>
                              </van-col>
                          </van-row>
                      </div>
                  </van-cell>
                </van-list>
            </van-pull-refresh>
        </div>
    </div>
</template>

<script setup>
import {useRouter} from "vue-router";
import {listMy} from "/@/api/new_module/questionNaire";

const router = useRouter();
const value = ref('');
const list = ref([]);
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);
const total = ref(0);
const questionList = ref([])
const queryParams = ref({
    pageNum: 1,
    pageSize: '',
    status: -1,
})
/** 查询自己要填写的问卷列表*/
const getList = async ()=>{
    await listMy(queryParams.value).then((res) => {
        questionList.value = res.response._rawValue?.rows
        total.value = res.response._rawValue?.total
    })
}
const onLoad = () => {
    setTimeout(() => {
        if (refreshing.value) {
            refreshing.value = false;
        }
        loading.value = true;
        getList()
        finished.value = true;
    }, 1000);
};
const onRefresh = () => {
    // 清空列表数据
    finished.value = false;
    loading.value = true;
    onLoad();
};
/** 查看*/
const handleViewOrAdd = (item)=>{
    let id = item.id
    if(item.status === 1 && item.inTime === 0 && item.myStatus !== 2){
        router.push({path:'/view',query:{id:id}})
    }
}

onMounted(() =>{
    getList()
})
</script>

<style lang="scss" scoped>
.content{

  .vanCell-class{
    margin: 3vw 4vw 3vw 4vw;
    width: 92vw;
    height:15vh;

    .grey-text{
      color: #9a9b9d;
    }
    .green-text {
      color: #4fc08d;
    }
        .title-class{
            margin-top: 3vw;
            flex-direction: column;
            text-overflow:ellipsis;//显示省略号
            white-space:nowrap;//禁止换行
            overflow:hidden;//隐藏溢出
        }
  }
}
</style>
